<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片取色器工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #fff;
        }
        
        .container {
            max-width: 1200px;
            width: 100%;
            background: rgba(15, 23, 42, 0.85);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        header {
            background: rgba(0, 0, 0, 0.4);
            padding: 25px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            color: #a0aec0;
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .app-container {
            display: flex;
            padding: 30px;
            gap: 30px;
        }
        
        .image-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        
        /* 进一步缩小上传区域 */
        .image-upload {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 10px;
            padding: 10px; /* 原 15px */
            margin-bottom: 15px;
            border: 2px dashed rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .image-upload:hover {
            border-color: #4facfe;
        }
        
        .upload-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px 5px; /* 原 15px 10px */
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .upload-area:hover {
            transform: translateY(-2px);
        }
        
        .upload-icon {
            font-size: 1.5rem; /* 原 2rem */
            color: #4facfe;
            margin-bottom: 5px; /* 原 10px */
        }
        
        .upload-text {
            text-align: center;
            margin-bottom: 8px; /* 原 10px */
            color: #cbd5e1;
        }
        
        .upload-text h3 {
            font-size: 1rem; /* 原 1.2rem */
            margin-bottom: 3px; /* 原 5px */
            color: #fff;
        }
        
        .upload-text p {
            font-size: 0.9rem; /* 新增：减小文字大小 */
        }
        
        .btn {
            background: linear-gradient(to right, #4facfe, #00f2fe);
            color: white;
            border: none;
            padding: 8px 15px; /* 原 10px 20px */
            border-radius: 50px;
            font-size: 0.8rem; /* 原 0.9rem */
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(79, 172, 254, 0.4); /* 减小阴影 */
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(79, 172, 254, 0.6);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        #fileInput {
            display: none;
        }
        
        /* 预览区域保持不变，添加缩放控制 */
        .preview-section {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 15px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            min-height: 250px;
            position: relative; /* 为缩放控件添加定位参考 */
        }
        
        .preview-title {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .preview-title i {
            color: #4facfe;
        }
        
        .canvas-container {
            position: relative;
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            background: #0f172a;
            min-height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 缩放控制按钮 */
        .zoom-controls {
            position: absolute;
            bottom: 25px;
            right: 25px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 10;
        }
        
        .zoom-btn {
            background: rgba(15, 23, 42, 0.8);
            color: #4facfe;
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }
        
        .zoom-btn:hover {
            background: #4facfe;
            color: white;
            border-color: #4facfe;
        }
        
        #imageCanvas {
            max-width: 100%;
            max-height: 100%;
            display: block;
            cursor: crosshair;
            transition: transform 0.3s ease; /* 添加平滑缩放过渡 */
        }
        
        .crosshair {
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        
        .color-info {
            flex: 1;
            min-width: 250px;
        }
        
        .color-display {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 15px;
            padding: 15px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .color-box {
            height: 100px;
            border-radius: 15px;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }
        
        .color-box:hover {
            transform: scale(1.02);
        }
        
        .color-box h3 {
            font-size: 1.2rem;
            background: rgba(0, 0, 0, 0.7);
            padding: 8px 15px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .color-details {
            background: rgba(15, 23, 42, 0.6);
            border-radius: 15px;
            padding: 15px;
            flex: 1;
        }
        
        .detail-item {
            margin-bottom: 15px;
        }
        
        .detail-item h4 {
            font-size: 1rem;
            margin-bottom: 8px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .detail-item h4 i {
            color: #4facfe;
        }
        
        .color-value {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .color-value:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .color-value span {
            font-family: 'Courier New', monospace;
            font-weight: 600;
            font-size: 1rem;
            flex: 1;
        }
        
        .copy-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #94a3b8;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .copy-btn:hover {
            background: #4facfe;
            color: white;
        }
        
        .instructions {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 15px;
            padding: 15px;
            margin-top: 15px;
            border-left: 4px solid #4facfe;
        }
        
        .instructions h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .instructions ul {
            padding-left: 20px;
            color: #cbd5e1;
        }
        
        .instructions li {
            margin-bottom: 8px;
            line-height: 1.6;
        }
        
        .lock-indicator {
            margin-top: 15px;
            padding: 8px 12px;
            background: rgba(79, 172, 254, 0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .lock-indicator i {
            color: #4facfe;
        }
        
        @media (max-width: 900px) {
            .app-container {
                flex-direction: column;
            }
            
            .color-info {
                min-width: auto;
            }
            
            .zoom-controls {
                bottom: 15px;
                right: 15px;
            }
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(15, 23, 42, 0.95);
            color: #4facfe;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            gap: 10px;
            transform: translateX(200%);
            transition: transform 0.3s ease;
            z-index: 1000;
            border-left: 4px solid #4facfe;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        footer {
            text-align: center;
            padding: 15px;
            color: #94a3b8;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }
        
        footer a {
            color: #4facfe;
            text-decoration: none;
        }
        
        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-eye-dropper"></i> 高级图片取色器</h1>
            <p class="subtitle">上传图片，点击任意位置获取精确颜色值，轻松复制十六进制、RGB、HSL等颜色格式</p>
        </header>
        
        <div class="app-container">
            <div class="image-section">
                <div class="image-upload">
                    <div class="upload-area" id="dropArea">
                        <i class="fas fa-cloud-upload-alt upload-icon"></i>
                        <div class="upload-text">
                            <h3>上传图片</h3>
                            <p>拖放图片到此处，或点击选择文件</p>
                            <p>支持 JPG, PNG, GIF 格式</p>
                        </div>
                        <button class="btn" id="uploadBtn"><i class="fas fa-folder-open"></i> 选择图片</button>
                        <input type="file" id="fileInput" accept="image/*">
                    </div>
                </div>
                
                <div class="preview-section">
                    <h3 class="preview-title"><i class="fas fa-image"></i> 图片预览</h3>
                    <div class="canvas-container">
                        <canvas id="imageCanvas"></canvas>
                        <div class="crosshair" id="crosshair" style="display: none;"></div>
                    </div>
                    
                    <!-- 缩放控制按钮 -->
                    <div class="zoom-controls">
                        <button class="zoom-btn" id="zoomInBtn">
                            <i class="fas fa-search-plus"></i>
                        </button>
                        <button class="zoom-btn" id="zoomOutBtn">
                            <i class="fas fa-search-minus"></i>
                        </button>
                        <button class="zoom-btn" id="resetZoomBtn">
                            <i class="fas fa-expand-arrows-alt"></i>
                        </button>
                    </div>
                    
                    <div class="lock-indicator">
                        <i class="fas fa-info-circle"></i>
                        <span>点击图片锁定颜色选择点，然后可以安全复制颜色值</span>
                    </div>
                </div>
            </div>
            
            <div class="color-info">
                <div class="color-display">
                    <div class="color-box" id="colorBox">
                        <h3 id="colorHex">#FFFFFF</h3>
                    </div>
                    
                    <div class="color-details">
                        <div class="detail-item">
                            <h4><i class="fas fa-palette"></i> 十六进制颜色值</h4>
                            <div class="color-value" id="hexValue">
                                <span>#FFFFFF</span>
                                <button class="copy-btn" data-clipboard-target="#hexValue span">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="detail-item">
                            <h4><i class="fas fa-code"></i> RGB 颜色值</h4>
                            <div class="color-value" id="rgbValue">
                                <span>rgb(255, 255, 255)</span>
                                <button class="copy-btn" data-clipboard-target="#rgbValue span">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="detail-item">
                            <h4><i class="fas fa-sliders-h"></i> HSL 颜色值</h4>
                            <div class="color-value" id="hslValue">
                                <span>hsl(0, 0%, 100%)</span>
                                <button class="copy-btn" data-clipboard-target="#hslValue span">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="instructions">
            <h3><i class="fas fa-lightbulb"></i> 使用说明</h3>
            <ul>
                <li>点击"选择图片"按钮或拖放图片到上传区域</li>
                <li>在图片上移动鼠标实时预览颜色</li>
                <li><strong>点击图片锁定选择点</strong> - 锁定后可以安全复制颜色值</li>
                <li>使用缩放按钮放大或缩小图片以便更精确地选择颜色</li>
                <li>点击复制按钮复制颜色值到剪贴板</li>
                <li>支持十六进制(HEX)、RGB、HSL三种格式</li>
            </ul>
        </div>
        
        <footer>
            <p>© 2025 高级图片取色器工具 | by：董生勉乎哉  微信:tbk211 </p>
        </footer>
    </div>
    
    <div class="notification" id="notification">
        <i class="fas fa-check-circle"></i>
        <span>颜色值已复制到剪贴板！</span>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const fileInput = document.getElementById('fileInput');
            const uploadBtn = document.getElementById('uploadBtn');
            const dropArea = document.getElementById('dropArea');
            const canvas = document.getElementById('imageCanvas');
            const crosshair = document.getElementById('crosshair');
            const ctx = canvas.getContext('2d');
            const colorBox = document.getElementById('colorBox');
            const colorHex = document.getElementById('colorHex');
            const hexValue = document.querySelector('#hexValue span');
            const rgbValue = document.querySelector('#rgbValue span');
            const hslValue = document.querySelector('#hslValue span');
            const copyButtons = document.querySelectorAll('.copy-btn');
            const notification = document.getElementById('notification');
            
            // 缩放控制按钮
            const zoomInBtn = document.getElementById('zoomInBtn');
            const zoomOutBtn = document.getElementById('zoomOutBtn');
            const resetZoomBtn = document.getElementById('resetZoomBtn');
            
            // 状态变量
            let selectedPoint = null;
            let isLocked = false;
            let currentColor = { r: 255, g: 255, b: 255 };
            let scale = 1; // 缩放比例
            let originalWidth = 0; // 原图宽度
            let originalHeight = 0; // 原图高度
            let isImageLoaded = false; // 图片是否已加载
            
            // 初始化Canvas
            function initCanvas() {
                canvas.width = canvas.parentElement.clientWidth;
                canvas.height = canvas.parentElement.clientHeight;
                ctx.fillStyle = '#0f172a';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                ctx.font = '16px Arial';
                ctx.fillStyle = '#94a3b8';
                ctx.textAlign = 'center';
                ctx.fillText('上传图片开始取色', canvas.width/2, canvas.height/2);
                
                // 重置缩放
                scale = 1;
                isImageLoaded = false;
            }
            
            initCanvas();
            
            // 上传按钮事件
            uploadBtn.addEventListener('click', () => {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', handleFileSelect);
            
            // 拖放事件
            dropArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropArea.style.borderColor = '#4facfe';
                dropArea.style.backgroundColor = 'rgba(79, 172, 254, 0.1)';
            });
            
            dropArea.addEventListener('dragleave', () => {
                dropArea.style.borderColor = 'rgba(255, 255, 255, 0.1)';
                dropArea.style.backgroundColor = '';
            });
            
            dropArea.addEventListener('drop', (e) => {
                e.preventDefault();
                dropArea.style.borderColor = 'rgba(255, 255, 255, 0.1)';
                dropArea.style.backgroundColor = '';
                
                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    handleFileSelect(e);
                }
            });
            
            // 处理文件选择
            function handleFileSelect(e) {
                const file = e.target.files[0];
                if (!file || !file.type.match('image.*')) return;
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        originalWidth = img.width;
                        originalHeight = img.height;
                        drawImage(img);
                        isImageLoaded = true;
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            
            // 绘制图片到Canvas
            function drawImage(img) {
                const container = canvas.parentElement;
                const maxWidth = container.clientWidth;
                const maxHeight = container.clientHeight;
                
                let width = img.width;
                let height = img.height;
                
                // 调整尺寸以适应容器
                if (width > maxWidth) {
                    const ratio = maxWidth / width;
                    width = maxWidth;
                    height = height * ratio;
                }
                
                if (height > maxHeight) {
                    const ratio = maxHeight / height;
                    height = maxHeight;
                    width = width * ratio;
                }
                
                canvas.width = width;
                canvas.height = height;
                
                // 重置缩放
                scale = 1;
                
                // 保存原始尺寸
                originalWidth = width;
                originalHeight = height;
                
                ctx.drawImage(img, 0, 0, width, height);
                
                // 重置选择点
                selectedPoint = null;
                isLocked = false;
                crosshair.style.display = 'none';
            }
            
            // 缩放功能
            function zoomImage(factor) {
                if (!isImageLoaded) return;
                
                // 计算新的缩放比例
                scale *= factor;
                
                // 限制缩放范围
                scale = Math.max(0.5, Math.min(scale, 5));
                
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 获取图片元素
                const img = new Image();
                img.onload = function() {
                    // 计算缩放后的尺寸
                    const scaledWidth = originalWidth * scale;
                    const scaledHeight = originalHeight * scale;
                    
                    // 居中绘制图片
                    const x = (canvas.width - scaledWidth) / 2;
                    const y = (canvas.height - scaledHeight) / 2;
                    
                    ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
                    
                    // 如果有选中的点，重新绘制十字准星
                    if (selectedPoint) {
                        crosshair.style.left = `${selectedPoint.x}px`;
                        crosshair.style.top = `${selectedPoint.y}px`;
                        crosshair.style.display = 'block';
                    }
                };
                
                // 如果有图片，使用当前图片源
                if (fileInput.files.length > 0) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(fileInput.files[0]);
                }
            }
            
            // 重置缩放
            function resetZoom() {
                if (!isImageLoaded) return;
                
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 获取图片元素
                const img = new Image();
                img.onload = function() {
                    // 重置缩放比例
                    scale = 1;
                    
                    // 绘制原始大小的图片
                    ctx.drawImage(img, 0, 0, originalWidth, originalHeight);
                    
                    // 如果有选中的点，重新绘制十字准星
                    if (selectedPoint) {
                        crosshair.style.left = `${selectedPoint.x}px`;
                        crosshair.style.top = `${selectedPoint.y}px`;
                        crosshair.style.display = 'block';
                    }
                };
                
                // 如果有图片，使用当前图片源
                if (fileInput.files.length > 0) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(fileInput.files[0]);
                }
            }
            
            // 缩放按钮事件
            zoomInBtn.addEventListener('click', () => zoomImage(1.2));
            zoomOutBtn.addEventListener('click', () => zoomImage(0.8));
            resetZoomBtn.addEventListener('click', resetZoom);
            
            // 鼠标移动事件
            canvas.addEventListener('mousemove', (e) => {
                if (!isLocked && isImageLoaded) {
                    const rect = canvas.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    // 更新十字准星位置
                    crosshair.style.left = `${x}px`;
                    crosshair.style.top = `${y}px`;
                    crosshair.style.display = 'block';
                    
                    // 获取像素颜色
                    try {
                        // 计算居中后的坐标
                        const centerX = (canvas.width - originalWidth * scale) / 2;
                        const centerY = (canvas.height - originalHeight * scale) / 2;
                        const imgX = Math.floor((x - centerX) / scale);
                        const imgY = Math.floor((y - centerY) / scale);
                        
                        // 确保坐标在有效范围内
                        if (imgX >= 0 && imgX < originalWidth && imgY >= 0 && imgY < originalHeight) {
                            const pixel = ctx.getImageData(x, y, 1, 1).data;
                            updateColorDisplay(pixel[0], pixel[1], pixel[2]);
                        }
                    } catch (error) {
                        // 忽略边界外的像素获取错误
                    }
                }
            });
            
            // 点击事件（锁定/解锁）
            canvas.addEventListener('click', (e) => {
                if (!isImageLoaded) return;
                
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // 锁定选择点
                selectedPoint = { x, y };
                isLocked = true;
                
                // 更新十字准星位置
                crosshair.style.left = `${x}px`;
                crosshair.style.top = `${y}px`;
                crosshair.style.display = 'block';
                crosshair.style.borderColor = '#ff0';
                
                // 获取像素颜色
                try {
                    // 计算居中后的坐标
                    const centerX = (canvas.width - originalWidth * scale) / 2;
                    const centerY = (canvas.height - originalHeight * scale) / 2;
                    const imgX = Math.floor((x - centerX) / scale);
                    const imgY = Math.floor((y - centerY) / scale);
                    
                    // 确保坐标在有效范围内
                    if (imgX >= 0 && imgX < originalWidth && imgY >= 0 && imgY < originalHeight) {
                        const pixel = ctx.getImageData(x, y, 1, 1).data;
                        updateColorDisplay(pixel[0], pixel[1], pixel[2]);
                    }
                } catch (error) {
                    console.error("无法获取像素颜色:", error);
                }
            });
            
            // 双击事件（解锁）
            canvas.addEventListener('dblclick', () => {
                isLocked = false;
                crosshair.style.borderColor = '#fff';
            });
            
            // 更新颜色显示
            function updateColorDisplay(r, g, b) {
                currentColor = { r, g, b };
                
                // 更新颜色显示
                const hex = rgbToHex(r, g, b);
                colorBox.style.background = hex;
                colorHex.textContent = hex;
                hexValue.textContent = hex;
                
                // 更新RGB值
                rgbValue.textContent = `rgb(${r}, ${g}, ${b})`;
                
                // 更新HSL值
                const hsl = rgbToHsl(r, g, b);
                hslValue.textContent = `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
            }
            
            // RGB转十六进制
            function rgbToHex(r, g, b) {
                return '#' + [r, g, b].map(x => {
                    const hex = x.toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                }).join('');
            }
            
            // RGB转HSL
            function rgbToHsl(r, g, b) {
                r /= 255, g /= 255, b /= 255;
                const max = Math.max(r, g, b), min = Math.min(r, g, b);
                let h, s, l = (max + min) / 2;
            
                if (max === min) {
                    h = s = 0; // achromatic
                } else {
                    const d = max - min;
                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                    switch (max) {
                        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                        case g: h = (b - r) / d + 2; break;
                        case b: h = (r - g) / d + 4; break;
                    }
                    h /= 6;
                }
            
                return {
                    h: h * 360,
                    s: s * 100,
                    l: l * 100
                };
            }
            
            // 复制功能
            copyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const target = this.getAttribute('data-clipboard-target');
                    const text = document.querySelector(target).textContent;
                    
                    navigator.clipboard.writeText(text).then(() => {
                        showNotification();
                    });
                });
            });
            
            // 显示通知
            function showNotification() {
                notification.classList.add('show');
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 2000);
            }
            
            // 窗口调整大小时重置Canvas
            window.addEventListener('resize', initCanvas);
        });
    </script>
</body>
</html>